<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>播放</title>
</head>

    <input class="btn" type="button" value="播放" onclick="Onclick()">

    <div>
        <input class="input" type="text" name="" value="0">
        <input class="add" type="button" value="+" onclick="Add()">
        <input class="sub" type="button" value="-" onclick="Sub()">
        <input class="clear" type="button" value="clear" onclick="Clear()">
    </div>
    <br>
    <div>
        <input type="checkbox" class="all" onclick="allchoose()">全选 <br>
        <input type="checkbox" class="input">输入1 <br>
        <input type="checkbox" class="input">输入2 <br>
        <input type="checkbox" class="input">输入3 <br>
    </div>
</body>
<script>
    let all = document.querySelector('.all');
    let input=document.querySelectorAll('.input');
    function allchoose(){
        for(i=0;i<input.length;i++){
            input[i].checked=all.checked;
        }
    }
    for(i=0;i<input.length;i++){
        input[i].onclick=function(){
            all.checked=Isall(input);
        }
    }
    function Isall(input){
        for(i=0;i<input.length;i++){
            if(!input[i].checked){
                return false;
            }
        }
        return true;
    }

    let btn = document.querySelector('.btn');
    function Onclick(){
        if(btn.value=="播放"){
            btn.value="暂停";
        }else{
            btn.value="播放";
        }
    }

    function Add(){
        let input =document.querySelector('.input');
        input.value=parseInt(input.value)+1;
    }
    function Sub(){
        let input =document.querySelector('.input');
        input.value=parseInt(input.value)-1;
    }
    function Clear(){
        let input =document.querySelector('.input');
        input.value=0;
    }
</script>
</html>